<template>
	<view>
		<view class="address-box" v-if="JSON.stringify(address)==='{}'">
			<button type="primary"  class="addAddress" size="mini" @click="addAddress">添加收货地址+</button>
		</view>
		<view class="address-info-box" v-else>
		   <view class="row1">
		     <view class="row1-left">
		       <view class="username">收货人：<text>{{address.userName}}</text></view>
		     </view>
		     <view class="row1-right">
		       <view class="phone">电话：<text>{{address.telNumber}}</text></view>
		       <uni-icons type="arrowright"  @click="addAddress" size="16"></uni-icons>
		     </view>
		   </view>
		   <view class="row2">
		     <view class="row2-left">收货地址：</view>
		     <view class="row2-right">{{addressStr}}</view>
		   </view>
		 </view>
		<image class="box-border" src="../../static/cart_border@2x.png" mode=""></image>
	</view>
</template>

<script>
	import {mapGetters,mapState,mapMutations} from 'vuex'
 	export default {
		name:"my-address",
		data() {
			return {
			};
		},
		computed: {
			...mapState('muser',['address']),
			...mapGetters('muser',['addressStr'])
		},
		methods:{
			...mapMutations('muser',['setAddress']),
			addAddress(){
				uni.chooseAddress({
					success:(res)=>{
						// 确认添加了
						if(res.errMsg=='chooseAddress:ok'){
							const obj = {}
							for(let item in res) {
								obj[item] = res[item]
							}
							this.setAddress(obj)
						}else {
							// 取消添加
							return uni.$showMsg('您取消了添加地址')
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.address-box {
		width: 100%;
		height: 80px;
		display: flex;
		align-items: center;
		justify-content: space-around;
		.addAddress {
			width: 160px;
			height: 40px;
			line-height: 40px;
			border: none;
			outline: none;
			border-radius: 0;
			background-color: #ff0000;
			color: #fff;
			font-weight: 600;
		}
	}
	.box-border {
		display: inline-block;
		width: 100%;
		height: 5px;
	}
	.address-info-box {
	  font-size: 12px;
	  height: 90px;
	  display: flex;
	  flex-direction: column;
	  justify-content: center;
	  padding: 0 5px;
	
	  // 第一行
	  .row1 {
	    display: flex;
	    justify-content: space-between;
	
	    .row1-right {
	      display: flex;
	      align-items: center;
	
	      .phone {
	        margin-right: 5px;
	      }
	    }
	  }
	
	  // 第二行
	  .row2 {
	    display: flex;
	    align-items: center;
	    margin-top: 10px;
	
	    .row2-left {
	      white-space: nowrap;
	    }
	  }
	}
</style>